<template>
	<div class="news-sort">
		<div
			:style="{backgroundColor: numColor, width: '3rem',fontsize: '1rem',height: '1.5rem',  lineHeight: '1.5rem', textAlign: 'center', color: 'white', borderRadius: '0.2rem'}">
			{{num}}
		</div>
		<div style="margin-left: 1rem; font-size: 0.7rem; overflow:hidden; width: calc(100% - 3rem);
          padding-bottom: .2rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          border-bottom: 1px solid lightgrey">
			<a href="javascript:void(0)" @click="click">{{title}}</a>
		</div>
	</div>

</template>

<script>
	export default {
		name: "NewsSort",
		props: ['num', 'title', 'id'],
		computed: {
			numColor() {
				if (this.num === 1) {
					return '#ff3300';
				}
				if (this.num === 2) {
					return '#ff6600';
				}
				if (this.num === 3) {
					return '#ff9900';
				}
				if (this.num === 4) {
					return '#666666';
				}
				if (this.num === 5) {
					return '#666666';
				}
				if (this.num === 6) {
					return '#666666';
				}
				return 'black';
			}
		},
		methods: {
			click() {
				this.$router.push({
					name: 'newsDetail',
					params: {
						id: this.id
					}
				})
			}
		}
	}
</script>

<style>
	.news-sort {
		display: flex;
		margin: 1rem 0;
	}
</style>